import lessModule from "./index.module.less"
import portableImage from "../../../../../../../../assets/image/panoramicMonitoringPage-portable.png"
import leftArrowImage from "../../../../../../../../assets/image/panoramicMonitoringPage-leftArrow.png"
import rightArrowImage from "../../../../../../../../assets/image/panoramicMonitoringPage-rightArrow.png"
import { useEffect, useState } from "react"
import { $eventBus, $EventBus_off, $EventBus_on } from "../../../../../../../../common/utils"
// 主页-全景监控页面-浮层组件-图例组件
const HomePage_PanoramicMonitoringPage_LayerComponent_TooltipComponent: React.FC = () => {

    

    const [isShow, setIsShow] = useState<boolean>(true)
    const [absoluteBottom, setAbsoluteBottom] = useState<number>(69)
    const list = [
        {
            image: portableImage,
            name: "有便携监测"
        },
        {
            color: "#52C41A",
            name: "经电容接地"
        },
        {
            color: "#FAAD14",
            name: "直接接地"
        },
        {
            color: "#FF4D4F",
            name: "直流超标"
        },
        {
            color: "#999999",
            name: "设备离线"
        },
    ]
// 广播函数数据
const eventBusFuncData = {
    timeAxis_isShow: (data) => {
        setAbsoluteBottom(data ? 121 : 69)
    }
}

    useEffect(() => {
        $EventBus_on(eventBusFuncData)
        // 销毁
        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])

    return (
        <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentTooltipComponent"]} style={{ bottom: absoluteBottom }}>
            {
                isShow && <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentTooltipComponent-content"]}>
                    {
                        list.map((item, idx) => {
                            return (
                                <div key={`item${idx}`} className={lessModule["homePagePanoramicMonitoringPageLayerComponentTooltipComponent-content__row"]}>
                                    {
                                        idx === 0 ? <img src={item["image"]} />
                                            : <div className={lessModule["content-row__radius"]} style={{ backgroundColor: item["color"] }}></div>
                                    }
                                    <span>{item["name"]}</span>
                                </div>
                            )
                        })
                    }
                </div>
            }
            <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentTooltipComponent-handle"]} onClick={() => { setIsShow(!isShow) }}>
                <img src={isShow ? leftArrowImage : rightArrowImage} />
            </div>
        </div>
    )
}


export default HomePage_PanoramicMonitoringPage_LayerComponent_TooltipComponent